<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<script src="http://libs.baidu.com/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<style type="text/css">
/*font-family:"Helvetica Neue","Helvetica","Arial","sans-serif"; */
html,body,button {margin:0px; overflow:hidden; height:100%;}
body {display:-webkit-flex;-webkit-flex-direction:column; }
.pathbread {margin-bottom:0px;}
.mainbottom {display:-webkit-flex;-webkit-flex-direction:row;-webkit-flex:1; border-top:0.2em solid gray;}
.mainbottomlft {padding:0.2em;display:-webkit-flex;-webkit-flex-direction:column;padding:0.5em;}
.mainbottomdvd {width:0.125em; background-color:gray; margin-left:0.2em; margin-right:0.2em;}
.mainbottomrgt {overflow:hidden; display:-webkit-flex;-webkit-flex-direction:column;padding:0.2em;}
.childbox {overflow:auto;-webkit-flex:1;display:-webkit-flex;-webkit-flex-direction:row;-webkit-flex-wrap:wrap;-webkit-align-items:flex-start;-webkit-align-content:flex-start;}
.child {margin-right:0.6em; margin-top:0.6em; word-wrap: break-word; white-space:normal; text-align: left; }
.node_val_pnl {-webkit-flex:1;margin-top:0.5em;margin-bottom:0.5em; padding:0.2em;}
.breadcrumb li.active {font-weight: bold;}
.flex1 {-webkit-flex:1;}
.flex2 {-webkit-flex:2;}
.flex3 {-webkit-flex:3;}
.flex4 {-webkit-flex:4;}
.flex5 {-webkit-flex:5;}
</style>
<script src="js/util.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<ol class="breadcrumb pathbread" id="nav_bread">
	<div class="btn-group" role="group" aria-label="...">
		<button type="button" class="btn btn-default" title="Refresh all data for current active path" onClick="zkuiRefreshPath()"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span></button>
		<button type="button" class="btn btn-default" title="Go up" onClick="zkuiGo(-1)"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
		<button type="button" class="btn btn-default" title="Go down" onClick="zkuiGo(1)"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
	</div>
	<li name="sample" class="hidden"><a href="#">Home</a></li>
	<li name="sample_active" class="active hidden">Data</li>
</ol>
<div class="mainbottom">
	<div class="mainbottomlft flex1">
		<div class="btn-group" role="group" aria-label="..." style="height:2.3em">
			<button type="button" class="btn btn-warning" onClick="showCreateChildDialog()"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><b> Create New Child</b></button>
			<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
				<span class="caret"></span>
				<span class="sr-only"></span>
			</button>
			<ul class="dropdown-menu" role="menu">
				<li><a href="javascript:showCopyChildrenDialog()"><span class="glyphicon glyphicon-send" aria-hidden="true"></span><b> Copy</b></a></li>
				<li class="divider"></li>
				<li><a href="javascript:showExportDialog()"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><b> Export</b></a></li>
				<li><a href="javascript:showImportDialog()"><span class="glyphicon glyphicon-open" aria-hidden="true"></span><b> Import</b></a></li>
				<li class="divider"></li>
				<li><a href="javascript:showDelChildrenDialog()"><span class="glyphicon glyphicon-fire" aria-hidden="true"></span><b> Delete All Children</b></a></li>
				<li><a href="javascript:showDelNodeDialog()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span><b> Delete Node</b></a></li>
				<li class="divider"></li>
				<li><a href="javascript:setUiLayoutMainLR(1,1)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:1</b></a></li>
				<li><a href="javascript:setUiLayoutMainLR(1,2)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:2</b></a></li>
				<li><a href="javascript:setUiLayoutMainLR(1,3)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:3</b></a></li>
				<li><a href="javascript:setUiLayoutMainLR(1,4)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:4</b></a></li>
				<li><a href="javascript:setUiLayoutMainLR(1,5)"><span class="glyphicon glyphicon-th" aria-hidden="true"></span><b> UI Layout 1:5</b></a></li>
			</ul>
		</div>
		<h4 id="chld_list" class="childbox">
			<a class="label label-primary child hidden" name="sample">Default</a>
		</h4>
	</div>
	<div class="mainbottomdvd"></div>
	<div class="mainbottomrgt flex3">
		<form class="form-inline" role="form" id="node_misc_prop">
			<div class="input-group">
				<span class="input-group-addon">PATH</span>
				<input type="text" class="form-control" readonly="1" placeholder="Not Got Yet" id="stat_path" style="width:16em">
			</div>
			<div class="input-group">
				<span class="input-group-addon">VERSION</span>
				<input type="text" class="form-control" readonly="1" placeholder="Not Got Yet" id="stat_version" style="width:4em">
			</div>
			<div class="input-group">
				<span class="input-group-addon">CTIME</span>
				<input type="text" class="form-control" readonly="1" placeholder="Not Got Yet" id="stat_ctime" style="width:12em">
			</div>
			<div class="input-group">
				<span class="input-group-addon">MTIME</span>
				<input type="text" class="form-control" readonly="1" placeholder="Not Got Yet" id="stat_mtime" style="width:12em">
			</div>
			<div class="input-group hidden" name="acl_sample">
				<span class="input-group-addon">ACL</span>
				<input type="text" class="form-control" readonly="1" placeholder="Not Got Yet" style="width:12em">
			</div>
		</form>
		<div style="padding-top:0.5em">
			<div class="btn-group" role="group" aria-label="...">
				<button type="button" class="btn btn-info" title="Edit value" onClick="showEditValDialog()"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span><b> Edit Value</b></button>
				<button type="button" class="btn btn-info" title="Edit ACL" onClick="showEditAclDialog()"><span class="glyphicon glyphicon-road" aria-hidden="true"></span><b> Edit ACL</b></button>
			</div>
		</div>
		<textarea class="form-control node_val_pnl" style="resize:none;-webkit-flex:1;" id="node_value" readonly="1"></textarea>
		<textarea style="display:none" id="node_acl_data"></textarea>
	</div>
</div>

<div class="modal" id="create_child_dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Create Child</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="create_child_dlg_name" class="control-label">Name:</label>
					<input type="text" class="form-control" id="create_child_dlg_name"/>
				</div>
				<div class="form-group">
					<label title="This node can not have any child"><input type="checkbox" id="create_child_dlg_ephemeral">EPHEMERAL</label>
					&nbsp;&nbsp;
					<label title="Append an unique 10 digit sequence to path name"><input type="checkbox" id="create_child_dlg_sequence">SEQUENCE</label>
					&nbsp;&nbsp;
					<label title="Go into this new child after create"><input type="checkbox" id="create_child_dlg_go" checked="1">Go after create</label>
					&nbsp;&nbsp;
					<label title="Close this dialog after create"><input type="checkbox" id="create_child_dlg_close" checked="1">Close after create</label>
				</div>
				<div class="form-group">
					<label for="create_child_dlg_data" class="control-label">Data:</label>
					<textarea class="form-control" rows="5" id="create_child_dlg_data" style="resize:vertical" placeholder="keep empty if this node has no data"></textarea>
				</div>
			</div>
			<div class="modal-footer">
				<div class="btn-group col-xs-7" role="group" aria-label="...">
					<button type="button" class="btn btn-success" title="Check whether the value is in valid JSON format" onClick="dlgCheckData('JSON','create_child_dialog','create_child_dlg_data')">JSON check</button>
					<button type="button" class="btn btn-success" title="Check whether the value is in valid YAML format" onClick="dlgCheckData('YAML','create_child_dialog','create_child_dlg_data')">YAML check</button>
					<button type="button" class="btn btn-primary" title="Edit new node default ACL" onClick="showDefaultAclDialog()">Default ACL</button>
				</div>
				<div class="col-xs-5">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-warning" onClick="ensureCreateChild()">Create</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="edit_val_dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Edit Node Value</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="edit_val_dlg_name" class="control-label">PATH:</label>
						<input type="text" class="form-control" id="edit_val_dlg_path" readonly="1"/>
					</div>
					<div class="form-group">
						<label title="Check version before edit the data"><input type="checkbox" id="edit_val_dlg_vcheck" checked="1">Version Check (current version is <span id="edit_val_dlg_version"></span>) </label>
					</div>
					<div class="form-group">
						<label for="edit_val_dlg_data" class="control-label">Data:</label>
						<textarea class="form-control" rows="5" id="edit_val_dlg_data" style="resize:vertical"></textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer container-fluid">
				<div class="row">
					<div class="btn-group col-xs-6" role="group" aria-label="...">
						<button type="button" class="btn btn-success" title="Whether the data is in valid JSON format" onClick="dlgCheckData('JSON','edit_val_dialog','edit_val_dlg_data')">JSON check</button>
						<button type="button" class="btn btn-success" title="Whether the data is in valid YAML format" onClick="dlgCheckData('YAML','edit_val_dialog','edit_val_dlg_data')">YAML check</button>
					</div>
					<div class="col-xs-6">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary" onClick="ensureEditVal()">Edit</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="del_node_dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Delete Node</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="del_node_dlg_name" class="control-label">PATH:</label>
						<input type="text" class="form-control" id="del_node_dlg_path" readonly="1"/>
					</div>
					<div class="form-group">
						<label title="Check version before delete this node"><input type="checkbox" id="del_node_dlg_vcheck" checked="1">Version Check (current version is <span id="del_node_dlg_version"></span>) </label>
					</div>
					<div class="form-group">
						<label title="Recursively delete, this is very dangerous, use this option carefully"><input type="checkbox" id="del_node_dlg_rcheck">Recursively delete all children and grandson(CAUTION!!)</label>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<div>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-danger" onClick="ensureDelNode()">Delete</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="copy_children_dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Copy</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="copy_children_dlg_path" class="control-label">From Path:</label>
						<input type="text" class="form-control" id="copy_children_dlg_path" readonly="1"/>
					</div>
					<div class="form-group">
						<label for="copy_children_dlg_new_path" class="control-label">To Path:</label>
						<input type="text" class="form-control" id="copy_children_dlg_new_path"/>
					</div>
					<div class="form-group">
						<label for="copy_children_dlg_max_depth" class="control-label">Max Depth: <span id="copy_children_dlg_max_depth_val">100</span></label>
						<input type="range" value="100" min="1" max="100" class="form-control" id="copy_children_dlg_max_depth" onChange="$('#copy_children_dlg_max_depth_val').text(parseInt($('#copy_children_dlg_max_depth').val()))"/>
					</div>
					<div class="form-group">
						<label><input type="checkbox" id="copy_children_dlg_children_only">Copy chilren only</label>
					</div>
					<span class="help-block hidden" id="copy_children_dlg_tips"></span>
				</form>
			</div>
			<div class="modal-footer">
				<div>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-danger" onClick="ensureCopyChildren()">Copy</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="del_children_dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Delete Children</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="del_children_dlg_path" class="control-label">Path:</label>
						<input type="text" class="form-control" id="del_children_dlg_path" readonly="1"/>
					</div>
					<div class="form-group">
						<label for="del_children_dlg_max_depth" class="control-label">Max Depth: <span id="del_children_dlg_max_depth_val">100</span></label>
						<input type="range" value="100" min="1" max="100" class="form-control" id="del_children_dlg_max_depth" onChange="$('#del_children_dlg_max_depth_val').text(parseInt($('#del_children_dlg_max_depth').val()))"/>
					</div>
					<span class="help-block hidden" id="del_children_dlg_tips"></span>
				</form>
			</div>
			<div class="modal-footer">
				<div>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-danger" onClick="ensureDelChildren()">Delete Children</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="export_dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Export</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="export_dlg_path" class="control-label">Path:</label>
						<input type="text" class="form-control" id="export_dlg_path" readonly="1"/>
					</div>
					<div class="form-group">
						<label for="export_dlg_local_path" class="control-label">Export To Local Directory: (will create if not exists)</label>
						<input type="text" class="form-control" id="export_dlg_local_path"/>
					</div>
					<div class="form-group">
						<label for="export_dlg_max_depth" class="control-label">Max Depth: <span id="export_dlg_max_depth_val">100</span></label>
						<input type="range" value="100" min="1" max="100" class="form-control" id="export_dlg_max_depth" onChange="$('#export_dlg_max_depth_val').text(parseInt($('#export_dlg_max_depth').val()))"/>
					</div>
					<div class="form-group">
						<label><input type="checkbox" id="export_dlg_without_acl">Without ACL</label>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<div>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-danger" onClick="ensureExportDialog()">Start Export</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="import_dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Import</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="import_dlg_path" class="control-label">To ZookKeeper Path: (will create if not exists, will overwrite if exists)</label>
						<input type="text" class="form-control" id="import_dlg_path"/>
					</div>
					<div class="form-group">
						<label for="import_dlg_local_path" class="control-label">Import From Local Directory:</label>
						<input type="text" class="form-control" id="import_dlg_local_path"/>
					</div>
					<div class="form-group">
						<label for="import_dlg_max_depth" class="control-label">Max Depth: <span id="import_dlg_max_depth_val">100</span></label>
						<input type="range" value="100" min="1" max="100" class="form-control" id="import_dlg_max_depth" onChange="$('#import_dlg_max_depth_val').text(parseInt($('#import_dlg_max_depth').val()))"/>
					</div>
					<div class="form-group">
						<label><input type="checkbox" id="import_dlg_without_acl">Without ACL</label>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<div>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-danger" onClick="ensureImportDialog()">Start Import</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="default_acl_dialog" style="z-index:9999990;">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Default ACL Configuration</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<div class="btn-group" role="group" aria-label="...">
							<button type="button" class="btn btn-default" onClick="defaultAclAddWorld()">Add World Scheme</button>
							<button type="button" class="btn btn-default" onClick="defaultAclAddIp()">Add IP Scheme</button>
							<button type="button" class="btn btn-default" onClick="defaultAclAddDigest()">Add Digest Scheme</button>
						</div>
					</div>
					<div class="form-group" style="display:none" id="default_acl_dialog_world_sample">
						<div class="input-group">
							<div class="input-group-addon">world:</div>
							<input type="text" class="form-control" value="anyone" name="id" readonly="1" />
							<div class="input-group-btn">
								<button type="button" name="perm_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="height:2.45em"><span name="perm_name">None Perm</span> <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" name="perm_list">
									<li><label><input type="checkbox" name="perm_r" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (R)ead</label></li>
									<li><label><input type="checkbox" name="perm_w" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (W)rite</label></li>
									<li><label><input type="checkbox" name="perm_c" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (C)reate</label></li>
									<li><label><input type="checkbox" name="perm_d" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (D)elete</label></li>
									<li><label><input type="checkbox" name="perm_a" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (A)dmin</label></li>
									<li class="divider"></li>
									<li><label><input type="checkbox" name="perm_all" value="1" onChange="defaultAclCheckOnChange(this)"> ALL</label></li>
								</ul>
							</div>
							<div class="input-group-btn">
								<button type="button" class="btn btn-warning" style="height:2.45em" title="remove this ACL" onClick="$(this).parents('[name=default_acl_dialog_world]').remove()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
							</div>
						</div>
					</div>
					<div class="form-group" style="display:none" id="default_acl_dialog_digest_sample">
						<div class="input-group">
							<div class="input-group-addon">user:</div>
							<input type="text" class="form-control" placeholder="user name" name="user"/>
							<div class="input-group-addon">pass:</div>
							<input type="password" class="form-control" placeholder="plain password" name="pass"/>
							<div class="input-group-btn">
								<button type="button" name="perm_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="height:2.45em"><span name="perm_name">None Perm</span> <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" name="perm_list">
									<li><label><input type="checkbox" name="perm_r" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (R)ead</label></li>
									<li><label><input type="checkbox" name="perm_w" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (W)rite</label></li>
									<li><label><input type="checkbox" name="perm_c" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (C)reate</label></li>
									<li><label><input type="checkbox" name="perm_d" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (D)elete</label></li>
									<li><label><input type="checkbox" name="perm_a" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (A)dmin</label></li>
									<li class="divider"></li>
									<li><label><input type="checkbox" name="perm_all" value="1" onChange="defaultAclCheckOnChange(this)"> ALL</label></li>
								</ul>
							</div>
							<div class="input-group-btn">
								<button type="button" class="btn btn-warning" style="height:2.45em" title="remove this ACL" onClick="$(this).parents('[name=default_acl_dialog_digest]').remove()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
							</div>
						</div>
					</div>
					<div class="form-group" style="display:none" id="default_acl_dialog_ip_sample">
						<div class="input-group">
							<span class="input-group-addon">IP:</span>
							<input type="text" class="form-control" placeholder="e.g. 192.168.10.1/24" name="ip"/>
							<div class="input-group-btn">
								<button type="button" name="perm_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="height:2.45em"><span name="perm_name">None Perm</span> <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" name="perm_list">
									<li><label><input type="checkbox" name="perm_r" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (R)ead</label></li>
									<li><label><input type="checkbox" name="perm_w" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (W)rite</label></li>
									<li><label><input type="checkbox" name="perm_c" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (C)reate</label></li>
									<li><label><input type="checkbox" name="perm_d" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (D)elete</label></li>
									<li><label><input type="checkbox" name="perm_a" value="1" onChange="defaultAclCheckOnChange(this)" sub="1"> (A)dmin</label></li>
									<li class="divider"></li>
									<li><label><input type="checkbox" name="perm_all" value="1" onChange="defaultAclCheckOnChange(this)"> ALL</label></li>
								</ul>
							</div>
							<div class="input-group-btn">
								<button type="button" class="btn btn-warning" style="height:2.45em" title="remove this ACL" onClick="$(this).parents('[name=default_acl_dialog_ip]').remove()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<div>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-danger" onClick="saveDefaultAcl()">Save</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal" id="edit_acl_dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title">Edit Node ACL</h4>
			</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="edit_acl_dlg_name" class="control-label">PATH:</label>
						<input type="text" class="form-control" id="edit_acl_dlg_path" readonly="1"/>
					</div>
					<div class="form-group">
						<div class="btn-group" role="group" aria-label="...">
							<button type="button" class="btn btn-default" onClick="editAclDlgAddWorld()">Add World Scheme</button>
							<button type="button" class="btn btn-default" onClick="editAclDlgAddIp()">Add IP Scheme</button>
							<button type="button" class="btn btn-default" onClick="editAclDlgAddDigest()">Add Digest Scheme</button>
						</div>
					</div>
					<div class="form-group" style="display:none" id="edit_acl_dlg_world_sample">
						<div class="input-group">
							<div class="input-group-addon">world:</div>
							<input type="text" class="form-control" value="anyone" name="id" readonly="1" />
							<div class="input-group-btn">
								<button type="button" name="perm_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="height:2.45em"><span name="perm_name">None Perm</span> <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" name="perm_list">
									<li><label><input type="checkbox" name="perm_r" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (R)ead</label></li>
									<li><label><input type="checkbox" name="perm_w" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (W)rite</label></li>
									<li><label><input type="checkbox" name="perm_c" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (C)reate</label></li>
									<li><label><input type="checkbox" name="perm_d" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (D)elete</label></li>
									<li><label><input type="checkbox" name="perm_a" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (A)dmin</label></li>
									<li class="divider"></li>
									<li><label><input type="checkbox" name="perm_all" value="1" onChange="editAclCheckOnChange(this)"> ALL</label></li>
								</ul>
							</div>
							<div class="input-group-btn">
								<button type="button" class="btn btn-warning" style="height:2.45em" title="remove this ACL" onClick="$(this).parents('[name=edit_acl_dlg_world]').remove()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
							</div>
						</div>
					</div>
					<div class="form-group" style="display:none" id="edit_acl_dlg_digest_sample">
						<div class="input-group">
							<div class="input-group-addon">user:</div>
							<input type="text" class="form-control" placeholder="user name" name="user"/>
							<div class="input-group-addon">pass:</div>
							<input type="password" class="form-control" placeholder="original plain password" name="pass"/>
							<div class="input-group-btn">
								<button type="button" name="perm_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="height:2.45em"><span name="perm_name">None Perm</span> <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" name="perm_list">
									<li><label><input type="checkbox" name="perm_r" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (R)ead</label></li>
									<li><label><input type="checkbox" name="perm_w" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (W)rite</label></li>
									<li><label><input type="checkbox" name="perm_c" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (C)reate</label></li>
									<li><label><input type="checkbox" name="perm_d" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (D)elete</label></li>
									<li><label><input type="checkbox" name="perm_a" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (A)dmin</label></li>
									<li class="divider"></li>
									<li><label><input type="checkbox" name="perm_all" value="1" onChange="editAclCheckOnChange(this)"> ALL</label></li>
								</ul>
							</div>
							<div class="input-group-btn">
								<button type="button" class="btn btn-warning" style="height:2.45em" title="remove this ACL" onClick="$(this).parents('[name=edit_acl_dlg_digest]').remove()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
							</div>
						</div>
					</div>
					<div class="form-group" style="display:none" id="edit_acl_dlg_digest_sample2">
						<div class="input-group">
							<div class="input-group-addon">digest id:</div>
							<input type="text" class="form-control" placeholder="e.g. user:dGhpc2lzcGFzc3dvcmQK" name="id"/>
							<div class="input-group-btn">
								<button type="button" name="perm_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="height:2.45em"><span name="perm_name">None Perm</span> <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" name="perm_list">
									<li><label><input type="checkbox" name="perm_r" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (R)ead</label></li>
									<li><label><input type="checkbox" name="perm_w" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (W)rite</label></li>
									<li><label><input type="checkbox" name="perm_c" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (C)reate</label></li>
									<li><label><input type="checkbox" name="perm_d" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (D)elete</label></li>
									<li><label><input type="checkbox" name="perm_a" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (A)dmin</label></li>
									<li class="divider"></li>
									<li><label><input type="checkbox" name="perm_all" value="1" onChange="editAclCheckOnChange(this)"> ALL</label></li>
								</ul>
							</div>
							<div class="input-group-btn">
								<button type="button" class="btn btn-warning" style="height:2.45em" title="remove this ACL" onClick="$(this).parents('[name=edit_acl_dlg_digest]').remove()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
							</div>
						</div>
					</div>
					<div class="form-group" style="display:none" id="edit_acl_dlg_ip_sample">
						<div class="input-group">
							<span class="input-group-addon">IP:</span>
							<input type="text" class="form-control" placeholder="e.g. 192.168.10.1/24" name="ip"/>
							<div class="input-group-btn">
								<button type="button" name="perm_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="height:2.45em"><span name="perm_name">None Perm</span> <span class="caret"></span></button>
								<ul class="dropdown-menu" role="menu" name="perm_list">
									<li><label><input type="checkbox" name="perm_r" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (R)ead</label></li>
									<li><label><input type="checkbox" name="perm_w" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (W)rite</label></li>
									<li><label><input type="checkbox" name="perm_c" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (C)reate</label></li>
									<li><label><input type="checkbox" name="perm_d" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (D)elete</label></li>
									<li><label><input type="checkbox" name="perm_a" value="1" onChange="editAclCheckOnChange(this)" sub="1"> (A)dmin</label></li>
									<li class="divider"></li>
									<li><label><input type="checkbox" name="perm_all" value="1" onChange="editAclCheckOnChange(this)"> ALL</label></li>
								</ul>
							</div>
							<div class="input-group-btn">
								<button type="button" class="btn btn-warning" style="height:2.45em" title="remove this ACL" onClick="$(this).parents('[name=edit_acl_dlg_ip]').remove()"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer container-fluid">
				<div>
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onClick="ensureEditAcl()">Edit</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container-fluid" style="position:absolute;width:100%;z-index:9999999;left:0px;top:2em;display:none" id="myalert">
	<div class="row">
		<div class="col-sm-3"></div>
		<div class="col-sm-6">
			<div class="alert alert-danger" role="alert" name="text_con">
				<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<span name="text">text</span>
			</div>
		</div>
		<div class="col-sm-3"></div>
	</div>
</div>

</body>
</html>
